<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:include value="/comm/header.jsp" />
<s:include value="/comm/menu.jsp"/>
<!--第1部分开始  --> 
    <div class="wrap1">
    	<div class="blank1"></div>
        
    	<div class="outbox">
        
<!--选项卡开始--> 	
<s:form name="addWantBuy" action="addWantBuy" method="post" enctype="multipart/form-data">
<input type="hidden" name="wantBuyModel.user.userid" value="<s:property value='#session.user.userid' />" />
<div id="mainTabbox7">
<div class="tab7_tt">发布求购信息</div>
 	<div id="tabbox7" class="tabbox7_box">
    	
		<ul>
        	
			<li id="taba1" onclick="setTab('taba',1,2)" class="hover"><a>基本信息</a></li>
			<li id="taba2" onclick="setTab('taba',2,2)"><a>附加信息</a></li>
 		</ul>
 
	</div>
 	<div id="conten">
      <div class="tab_wrap7">
 		<div class="tab7_show" id="con_taba_1">
        
        <!--选项卡1内容开始-->

<div class="input_box">
	<ul>
    	<li class="t1"><span class="span33">名称</span></li>
        <li class="t2">
        	<s:textfield name="wantBuyModel.goodsName" id="goodsName" size="50" cssClass="input1" maxlength="35"/><label style="color:red">&nbsp;*</label>
        	<label id="goodsNamePrompt" style="display: none; color: red">名称不能为空</label>
		</li>
        <li class="t1"><span class="span33">图片</span></li>
        <li class="t2">
        	<ul>
        		<li><s:file name="image" cssClass="input5" id="image" ></s:file><label id="imagePrompt" style="color: red"></label></li>
            </ul>
        </li>
        <li class="t1"><span class="span33">所属区域</span></li>
        <li class="t2">
        	<s:select name="wantBuyModel.areaId" list="areas" listKey="areaId" listValue="areaName" value="wantBuyModel.areaId"/>
        </li>
        
        <li class="t1"><span class="span33">类别</span></li>
        <li class="t2">
        	<s:select name="wantBuyModel.categoryId" list="categorys" listKey="categoryId" listValue="categoryName" value="wantBuyModel.categoryId"/>
        </li>
        
        <li class="t1"><span class="span33">物品价格</span></li>
        <li class="t2">
        	<s:textfield id="price" name="wantBuyModel.price" cssClass="input1" />&nbsp;左右<label style="color:red">&nbsp;*</label>
        	<label id="pricePrompt" style="display: none; color: red">请输入正确的价格</label>
        </li>
        <li class="t1"><span class="span33">可接受的代购服务费</span></li>
        <li class="t2">
			比例：<s:textfield id="ratio" name="wantBuyModel.ratio" cssClass="input1" />%<label style="color:red">&nbsp;*</label>
			&nbsp;&nbsp;&nbsp;&nbsp;
			金额：<s:textfield id="serviceFee" name="wantBuyModel.serviceFee" cssClass="input1" readonly="true" size="10" />
			<label id="ratioPrompt" style="display: none; color: red">服务费比例值只能为正整数</label>
        </li>
        <li class="t1"><span class="span33">求购数量</span></li>
        <li class="t2">
        	<s:if test="wantBuyModel == null">
        		<input type="text" id="goodsNum" name="wantBuyModel.number" class="input1" size="5" value="1" onkeyup="this.value=this.value.replace(/\D/g,'')" />
        	</s:if>
        	<s:else>
        		<s:textfield id="goodsNum" name="wantBuyModel.number" cssClass="input1" size="5"  onkeyup="this.value=this.value.replace(/\D/g,'')"/>
        	</s:else>
			<label style="color:red">&nbsp;*</label><label id="numberPrompt" style="display: none; color: red"></label>
        </li>
        <li class="t1"><span class="span33">信息有效期</span></li>
        <li class="t2">
        	<s:textfield name="wantBuyModel.validityPeriod" id="validityPeriod"  cssClass="input1" readonly="true" /><label style="color:red">&nbsp;*</label><label id="validityPeriodPrompt" style="display: none; color: red">有效期不能为空</label>
        </li>
    </ul>
    
</div>
<div class="clear"></div>
        
        <!--选项卡1内容结束-->
        
        
 		</div>
 		<div class="tab7_show" id="con_taba_2">
        
        <!--选项卡2内容开始-->

<div class="input_box">
	<ul>
    	<li class="t1"><span class="span33">要求来源</span></li>
        <li class="t2">
			<s:select name="wantBuyModel.source" list='#{"0":"不限","1":"大型超市","2":"便利店","3":"专卖店","4":"生产厂家","5":"其他" }' theme="simple"  value="wantBuyModel.source" />
        </li>
        <li class="t1"><span class="span33">要求提供单据类型</span></li>
        <li class="t2">
			<s:select name="wantBuyModel.receipts" list='#{"0":"无要求","1":"小票","2":"发票","3":"发票或小票","4":"小票或发票复印件" }' theme="simple"  value="wantBuyModel.receipts"/>
        </li>
        
        <li class="t1"><span class="span33">描述</span></li>
        <li class="t2">
        	<s:textfield name="wantBuyModel.description" cssClass="input1" size="50"/>
        </li>
    </ul>
    
</div>
<div class="clear"></div>
        
        <!--选项卡2内容结束-->
        
 		</div>
        
      </div>
 	</div>
 </div>
 </s:form>
<!--选项卡结束-->


<div class="clear"></div>
<div class="but_submit" style="text-align:center; margin:30px 0"><a href="javascript:addWantBuy();">确认求购</a>&nbsp;&nbsp;&nbsp;</div>
      </div>
    </div>
<s:include value="/comm/bottom.jsp" />
<script type="text/javascript">
	$("#goodsName").blur(validateGoodsName);
	$("#price").blur(function(){if (validatePrice()) {calcServiceFee();}});
	$("#ratio").blur(function() {if (validateRatio()) {calcServiceFee();}});
	$("#goodsNum").blur(function(){var number = $(this).val(); if (!digitRegex.test(number)){$(this).val(1);} calcServiceFee();});
	$("#validityPeriod").click(function() {
		$("#validityPeriodPrompt").hide();
		WdatePicker({minDate:'%y-%M-{%d+1}'});
	});
	
	$("#image").change(function() {
		var image = $(this).val();
		if(!/\.(jpeg|png|JPEG|PNG)$/.test(image)) {
			$("#imagePrompt").html("图片类型必须是.jpeg,png中的一种");
        }
		else {
			$("#imagePrompt").html("");	
		}
	});

	function addWantBuy() {
		if (!validateGoodsName()) {
			return;
		}
		
		if (!validatePrice()) {
			return;
		}
		if (!validateRatio()) {
			return;
		}
		if (!validateNumber()) {
			return;
		}
		if (!validateImage()) {
			return;
		}
		if ($("#validityPeriod").val() == "") {
			$("#validityPeriodPrompt").show();
			return;
		}
		
		
		$("#addWantBuy").submit();	
	}

	function validateGoodsName() {
		var goodsName = trim($("#goodsName").val());
		if (goodsName == "") {
			$("#goodsNamePrompt").show();
			return false;
		}
		else {
			$("#goodsNamePrompt").hide();
			return true;
		}
	}
	
	function validateImage() {
		var image = $("#image").val();
		if (!/\.(jpeg|png|JPEG|PNG)$/.test(image)) {
			$("#imagePrompt").html("图片类型必须是.jpeg,png中的一种");
			return false;
		}
		return true;
	}
		
	function validatePrice() {
		var price = trim($("#price").val());
		if (!priceRegex.test(price) || price <= 0) {
			$("#pricePrompt").html("请输入正确的价格");
			$("#pricePrompt").show();
			return false;
		} 
		
		$("#pricePrompt").hide();
		return true;
		
	}
		
	function validateRatio() {
		var ratio = trim($("#ratio").val());
		if (!digitRegex.test(ratio) || ratio <= 0) {
			$("#ratioPrompt").show();
			return false;
		}
		$("#ratioPrompt").hide();
		return true;
	}
	
	function validateNumber() {
		var number = trim($("#goodsNum").val());
		if (!digitRegex.test(number) || number <= 0) {
			$("#numberPrompt").html("请输入正确的求购数量");
			$("#numberPrompt").show();
			return false;
		}
		$("#numberPrompt").hide();
		return true;
	}

	//计算佣金
	function calcServiceFee() {
		var price = trim($("#price").val());
		var ratio = trim($("#ratio").val());
		var number = trim($("#goodsNum").val());
		if (priceRegex.test(price) && price > 0 && digitRegex.test(ratio) && ratio > 0 && digitRegex.test(number) && number > 0) {
			var serviceFee = price * ratio * number / 100;
			$("#serviceFee").val(serviceFee.toFixed(2));	
		}
	}

</script>